<!DOCTYPE html>
<html lang="zh" xml:lang="zh">
<head>
    <meta charset='utf-8'/>
    <title>Map-Navigator</title>
    <script src="../../ref/jquery-3.2.1.min.js"></script>
    <style type="text/css">
        * {
            font-family: "微软雅黑";
            margin: 0px;
            padding: 0px;
        }

        .left, .right {
            height: 100%;
            position: absolute;
            top: 0px;
        }

        body {
            overflow-y: hidden;
        }

        .left {
            width: 30%;
            left: 0px;
            display: fixed;
        }

        .right {
            width: 70%;
            right: 0px;
        }

        #iframe {
            width: 100%;
            height: 100%;
            border: 0px solid green;
        }

        #map {
            width: 90%;
            margin-left: 5%;
            height: 90%;
            margin: 10px;
            margin-top: 25px;
        }
    </style>
</head>
<body>
<div class="left">
    <iframe id="iframe" src="Navigator.html"></iframe>
</div>
<div class="right">
    <div id="map"></div>
</div>
<script type='text/javascript' src="../../ref/echarts.min.js"></script>
<script type="text/javascript">
    function getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    }
    //获取当前时间
    function getBeforeDate(n) {
        var n = n;
        var d = new Date();
        var year = d.getFullYear();
        var mon = d.getMonth() + 1;
        var day = d.getDate();
        if (day <= n) {
            if (mon > 1) {
                mon = mon - 1;
            }
            else {
                year = year - 1;
                mon = 12;
            }
        }
        d.setDate(d.getDate() - n);
        year = d.getFullYear();
        mon = d.getMonth() + 1;
        day = d.getDate();
        s = year + "-" + (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);
        return s;
    }
/*    var timesnow = getNowFormatDate();*/
    var timesnow = getBeforeDate(1)







    function showmaps(times) {


        $.get('/hbtserver/aqi/city/day?day=' + times + '', function (result) {
            showMap(result);
        })
    }

    //var data=[timesnow];
    //var data=['2017-01-01'];
    //function sendAjax(){
    //	var res=[];
    //	for(var i in data){
    //	$.get('http://127.0.0.1:15000/hbtserver/aqi/city/day?day='+data[i]+'',function(result){
    //		showMap(result);
    //	})
    //	}
    //	}
    //	sendAjax();


    function showMap(dataN/*,data_name,data_data*/) {
        console.log(dataN);
        var myData = [];
        var newData = [];
        /*for(var i=0;i<data_name.length;i++){
            myData[i]={name:data_name[i],value:data_data[i]}

        }	*/
//		 myData = [  
//				{name: '南阳市',value: Math.round(Math.random()*1000)},
//              {name: '信阳市',value: Math.round(Math.random()*1000)},
//              {name: '洛阳市',value: Math.round(Math.random()*1000)},
//              {name: '驻马店市',value: Math.round(Math.random()*1000)},
//              {name: '周口市',value: Math.round(Math.random()*1000)},
//              {name: '商丘市',value: Math.round(Math.random()*1000)},
//              {name: '三门峡市',value: Math.round(Math.random()*1000)},
//              {name: '新乡市',value: Math.round(Math.random()*1000)},
//              {name: '平顶山市',value: Math.round(Math.random()*1000)},
//              {name: '郑州市',value: Math.round(Math.random()*1000)},
//              {name: '安阳市',value: Math.round(Math.random()*1000)},
//              {name: '开封市',value: Math.round(Math.random()*1000)},
//              {name: '焦作市',value: Math.round(Math.random()*1000)},
//              {name: '许昌市',value: Math.round(Math.random()*1000)},
//              {name: '濮阳市',value: Math.round(Math.random()*1000)},
//              {name: '漯河市',value: Math.round(Math.random()*1000)},
//              {name: '鹤壁市',value: Math.round(Math.random()*1000)}
//				];
        var airtypecode = ['aqi', 'pm25', 'pm10', 'so2', 'no2', 'co', 'o3'];
        for (var m in airtypecode) {
            for (var i in dataN) {
                myData.push({name: dataN[i].name, value: dataN[i][airtypecode[m]]});
            }
        }
        for (var i = 0, len = myData.length; i < len; i += dataN.length) {
            newData.push(myData.slice(i, i + dataN.length));
        }
        console.log(newData);
        var mapData = [];
        var mapRange = [];
        var mapIndexName = ['AQI', 'PM2.5', 'PM10', 'SO2', 'NO2', 'CO', 'O3'];
//			var mapMax=[400,400,400,400,400,400,80];
        for (var i = 0; i < 7; i++) {
            mapData[i] = {
                name: mapIndexName[i],
                type: 'map',
                mapType: 'hn',
                selectedMode: 'single',
                itemStyle: {
                    normal: {label: {show: true}},
                    emphasis: {label: {show: true}}
                },
                data: newData[i]
            }

            mapRange[i] = {
                min: 0,
                max: 400,
                color: ['rgb(126,0,35)', 'rgb(153,0,76)', 'rgb(255,0,0)', 'rgb(255,126,0)', 'rgb(255,255,0)', 'rgb(0,228,0)'],
                text: ['严重污染', '优'],           // 文本，默认为数值文本
                calculable: true,
                x: 'left',
                y: 'center'

            }
        }
        var alldata = [];
        for (var i = 0; i < 7; i++) {
            alldata[i] = {
                dataRange: mapRange[i],
                series: mapData
            }
        }
        console.log(alldata);

        $.get('hn.json', function (chinaJson) {
            echarts.registerMap('hn', chinaJson); // 注册地图
            var mapChart = echarts.init(document.getElementById('map'));

            var option = {
                baseOption: {
                    timeline: {
                        show: false,
                        data: ['2017-1-1', '2017-1-2', '2017-1-3', '2017-1-4', '2017-1-5', '2017-1-6', '2017-1-7']
                    },
                    title: {
                        text: '河南省各市监测数据',
                        subtext: name,
                        x: 'center'
                    },
                    legend: {
                        data: mapIndexName,
                        orient: 'vertical',
                        padding: 10,
                        itemGap: 20,
                        selectedMode: 'single',
                        x: 'right',
                        y: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: name
                    }
                },
                options: alldata
            };

            mapChart.setOption(option, true);
        });
    }

</script>
</body>
</html>
		